<template>
  <el-container style="height: 100%">
    <!-- 侧边栏 -->
    <el-aside width="250px" class="sidebar">
      <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/residents">居民信息</el-menu-item>
        <el-menu-item index="/houses">房屋信息</el-menu-item>
        <el-menu-item index="/properties">物业管理</el-menu-item>
        <el-menu-item index="/complaints">投诉建议</el-menu-item>
        <el-menu-item index="/activities">社区活动</el-menu-item>
        <el-menu-item index="/system">系统管理</el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主体内容区域 -->
    <el-main>
      <el-row class="content" justify="center" style="margin-top: 20px">
        <el-col :span="18">
          <el-card>
            <div class="header">
              <h3>投诉与建议管理</h3>
              <el-button type="primary" @click="openAddComplaintDialog">提交投诉</el-button>
            </div>

            <el-table :data="complaints" stripe>
              <el-table-column prop="id" label="ID" width="80"></el-table-column>
              <el-table-column prop="complaintType" label="投诉类型" width="150"></el-table-column>
              <el-table-column prop="description" label="投诉描述" width="300"></el-table-column>
              <el-table-column prop="status" label="状态" width="120"></el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="text" @click="openProcessComplaintDialog(scope.row)"
                    >处理</el-button
                  >
                  <el-button type="text" @click="deleteComplaint(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 提交投诉弹窗 -->
            <el-dialog title="提交投诉" :visible.sync="addComplaintDialogVisible">
              <el-form :model="newComplaint" ref="addComplaintForm">
                <el-form-item label="投诉类型" :label-width="'100px'">
                  <el-input
                    v-model="newComplaint.complaintType"
                    placeholder="请输入投诉类型"
                  ></el-input>
                </el-form-item>
                <el-form-item label="投诉描述" :label-width="'100px'">
                  <el-input
                    v-model="newComplaint.description"
                    placeholder="请输入投诉描述"
                    type="textarea"
                  ></el-input>
                </el-form-item>
                <el-form-item label="投诉人" :label-width="'100px'">
                  <el-input v-model="newComplaint.complainer" placeholder="请输入投诉人"></el-input>
                </el-form-item>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="addComplaintDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitAddComplaint">确认</el-button>
              </div>
            </el-dialog>

            <!-- 处理投诉弹窗 -->
            <el-dialog title="处理投诉" :visible.sync="processComplaintDialogVisible">
              <el-form :model="currentComplaint" ref="processComplaintForm">
                <el-form-item label="处理状态" :label-width="'100px'">
                  <el-select v-model="currentComplaint.status" placeholder="请选择处理状态">
                    <el-option label="处理中" value="处理中"></el-option>
                    <el-option label="已处理" value="已处理"></el-option>
                    <el-option label="未处理" value="未处理"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="处理结果" :label-width="'100px'">
                  <el-input
                    v-model="currentComplaint.result"
                    placeholder="请输入处理结果"
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="processComplaintDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitProcessComplaint">确认</el-button>
              </div>
            </el-dialog>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  ElContainer,
  ElAside,
  ElMenu,
  ElMenuItem,
  ElMain,
  ElRow,
  ElCol,
  ElButton,
  ElCard,
  ElTable,
  ElTableColumn,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
} from 'element-plus'
import {
  getAllComplaints,
  addComplaint,
  updateComplaint,
  deleteComplaint as del,
} from '@/utils/axios'

const activeMenu = ref('/complaints')
const complaints = ref([])
const addComplaintDialogVisible = ref(false)
const processComplaintDialogVisible = ref(false)
const newComplaint = ref({
  complaintType: '',
  description: '',
  complainer: '',
})
const currentComplaint = ref({
  id: null,
  status: '',
  result: '',
})

// 获取投诉数据
const loadComplaints = async () => {
  const response = await getAllComplaints()
  complaints.value = response
}

// 打开提交投诉弹窗
const openAddComplaintDialog = () => {
  newComplaint.value = {
    complaintType: '',
    description: '',
    complainer: '',
  }
  addComplaintDialogVisible.value = true
}

// 提交提交投诉信息
const submitAddComplaint = async () => {
  await addComplaint(newComplaint.value)
  addComplaintDialogVisible.value = false
  loadComplaints()
}

// 打开处理投诉弹窗
const openProcessComplaintDialog = (complaint) => {
  currentComplaint.value = { ...complaint }
  processComplaintDialogVisible.value = true
}

// 提交处理投诉信息
const submitProcessComplaint = async () => {
  await updateComplaint(currentComplaint.value.id, currentComplaint.value)
  processComplaintDialogVisible.value = false
  loadComplaints()
}

// 删除投诉
const deleteComplaint = async (id) => {
  await del(id)
  loadComplaints()
}

onMounted(() => {
  loadComplaints()
})
</script>

<style scoped>
.content {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.el-button {
  margin-left: 10px;
}

.el-dialog {
  width: 400px;
}

.el-form-item {
  margin-bottom: 15px;
}
</style>
